<!DOCTYPE html>
<html lang="{{site.locale}}" {{#if site.rtl}}dir="rtl"{{/if}}>
{{> html-head }}

<body>
  {{> header }}

  <div id="main">
    <div class="container has-side-nav">

      {{> navigation key='foundation'}}

      {{{ contents }}}

      <article>
        <div class="container no-headline">
          <ul class="news-list">
            <li>Loading data...</li>
          </ul>
        </div>
      </article>

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.4.2/tabletop.min.js"></script>
      <script type="text/javascript">
        /* global Tabletop */
        var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1jSxgB5MYd1xCOmhb5QZ90PbDiY57n4z4A0lcdQD-UG8/pubhtml'
        window.onload = function () {
          Tabletop.init({
            key: publicSpreadsheetUrl,
            callback: showInfo,
            simpleSheet: true
          })
          function pad (str) { return ('0' + str).substr(-2) }
          function parseDate (date) {
            try {
              var parsedDate = date.split('.')
              return new Date('20' + parsedDate[2], parsedDate[0] - 1, parsedDate[1])
            } catch (_) {
              return date
            }
          }
          function formatDate (date) {
            return date === 'Invalid Date' ? '' : date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate())
          }
          function showInfo (data, tabletop) {
            data.reverse()
            var html = ''
            var list = document.getElementsByClassName('news-list')
            data.forEach(function (row) {
              var date = parseDate(row.Date)
              html += '<li><time datetime="' + date + '">' + formatDate(date) + '</time><a href="' + row.Link + '">' + row.Title + '</a></li>'
            })
            if (list && list[0]) list[0].innerHTML = html
          }
        }
      </script>

    </div>
  </div>

  {{> footer }}
</body>
</html>
